<template>
  <!-- 顶部导航栏 -->
  <van-nav-bar :border="false" fixed>
    <template #left>
      <div class="nav-bar-left-div">
        <span :class="$route.path == '/profile' ? 'active' : ''">数据</span>
      </div>
    </template>
    <template #right>
      <van-icon @click="settingClick" name="setting-o" size="24" color="#000" />
      <van-icon
        @click="envelopClick"
        name="envelop-o"
        size="24"
        color="#000"
        style="margin-left: 15px;"
      />
    </template>
  </van-nav-bar>

  <div class="no-login-container" v-if="!isLogin">
    <div class="user-bar">
      <div class="row-1" @click="toLogin">
        <div class="user-avatar">
          <van-image round width="60" height="60" src="../../../public/img/AvatarImg/none.png" />
        </div>
        <div class="user-info">
          <p class="user-name">点击登录</p>
          <p
            class="user-level"
            style="margin-left: 1px;font-size: 12px;color: #969696;"
          >登录解锁更多精彩内容哦~</p>
        </div>
      </div>
    </div>
  </div>

  <div class="profile-container" v-else>
    <!-- 用户信息 -->
    <div class="user-bar">
      <div class="row-1">
        <div class="user-avatar">
          <van-image
            v-if="userStore.userInfo.avatarUrl"
            round
            width="60"
            height="60"
            :src="userStore.userInfo.avatarUrl"
          />
          <van-image
            v-else
            round
            width="60"
            height="60"
            src="../../../public/img/AvatarImg/none.png"
          />
        </div>
        <div class="user-info">
          <p class="user-name">{{ userStore.userInfo.name }}</p>
          <p class="user-level" style="margin-left: 1px;">
            <van-tag type="danger">Lv.{{ userStore.userInfo.level }}</van-tag>
          </p>
        </div>
      </div>
      <div class="row-2">
        <div class="item">
          <p>11</p>
          <p class="title">关注</p>
        </div>
        <div class="item">
          <p>11</p>
          <p class="title">粉丝</p>
        </div>
        <div class="item">
          <p>1</p>
          <p class="title">收藏游戏</p>
        </div>
        <div class="item">
          <p>4</p>
          <p class="title">历史记录</p>
        </div>
      </div>
    </div>

    <!-- 用户拥有的游戏 -->
    <div class="user-game">
      <div class="user-game-bar">
        <div class="row-1">
          <p>
            <van-icon name="desktop-o" style="margin-right: 5px;" />库存总价值
          </p>
        </div>
        <div class="row-2">
          <div class="item">
            <p>3772</p>
            <p class="title">账号价值 ￥</p>
          </div>
          <div class="item" style="margin-left: 30px;">
            <p>2950</p>
            <p class="title">游戏时长 h</p>
          </div>
          <div class="item" style="margin-left: 30px;">
            <p>59</p>
            <p class="title">游戏数量</p>
          </div>
          <div class="item" style="margin-left: auto;">
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="row-3">
          <div class="item" v-for="item in friendAvatar">
            <van-image width="20" height="20" fit="cover" :src="item" />
          </div>
        </div>
      </div>
    </div>

    <!-- 游戏列表 -->
    <user-games-list class="user-game-list"></user-games-list>
  </div>
  <back-top></back-top>
</template>

<script setup>
import userGamesList from '../../components/gameGoodsItem/userGamesList.vue';
import backTop from '../../components/backTop/backTop.vue';
import router from '../../route';

import { onMounted, reactive, ref } from 'vue';
import { useUserStore } from '../../store/user';
const userStore = useUserStore()

const tokenStr = window.sessionStorage.getItem('token')
const isLogin = ref(false)

onMounted(() => {
  if (tokenStr) {
    isLogin.value = true
  } else {
    isLogin.value = false
  }
})

const toLogin = () => {
  router.push('/login')
}

const friendAvatar = reactive([
  '../../../public/img/AvatarImg/Akizuki Kanna.jpg',
  '../../../public/img/AvatarImg/Asan.jpg',
  '../../../public/img/AvatarImg/Simon.jpg',
  '../../../public/img/AvatarImg/Charon.jpg',
  '../../../public/img/AvatarImg/Leilei.jpg',
  '../../../public/img/AvatarImg/other_01.jpg',
  '../../../public/img/AvatarImg/other_02.jpg',
])

// 顶部导航事件 
const settingClick = () => {
  router.push('/setting')
}
const envelopClick = () => {
  console.log('点击消息按钮');
}
</script>

<style scoped>
.profile-container,
.no-login-container {
  padding-top: 46px;
  padding-bottom: 50px;
}

.user-bar {
  padding: 10px 12px 10px 12px;
  background-image: url("../../../public/img/Profile/1647527280977.png");
  background-size: cover;
  background-position: center;
  font-size: 0;
  border-bottom: 3px solid #f2f3f5;
}
.user-bar .row-1 {
  display: flex;
}
.user-bar .row-1 .user-info {
  margin-left: 12px;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.user-bar .row-1 .user-info .user-name {
  font-size: 18px;
  font-weight: 500;
  color: #323233;
}
.user-bar .row-2 {
  margin: 20px 20px 0px 20px;
  font-size: 18px;
  line-height: 23px;
  color: #323233;
  display: flex;
  justify-content: space-between;
}
.user-bar .row-2 .item {
  text-align: center;
}
.user-bar .row-2 .title {
  margin-top: 5px;
  font-size: 12px;
  line-height: 16px;
  color: #c8c9cc;
}

.user-game {
  padding: 8px 5px;
  border-bottom: 3px solid #f2f3f5;
  background-color: #fff;
}
.user-game .user-game-bar {
  border-radius: 3px;
  background-image: url("../../../public/img/Profile/1647524895232.png");
  background-size: cover;
  background-position: center;
}
.user-game .user-game-bar .row-1 {
  font-size: 14px;
  padding: 12px 10px 12px 10px;
  color: #fff;
}
.user-game .user-game-bar .row-2 {
  padding: 10px 10px;
  background: linear-gradient(90deg, #14191e7c, #464b5011);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.user-game .user-game-bar .row-2 .item {
  font-size: 20px;
  line-height: 20px;
  font-weight: 600;
  color: #fff;
}
.user-game .user-game-bar .row-2 .item .title {
  font-size: 10px;
  font-weight: 400;
  color: #c8c9cc;
}
.user-game .user-game-bar .row-3 {
  font-size: 0;
  display: flex;
}
.user-game .user-game-bar .row-3 .item {
  margin: 8px 5px 8px 12px;
  border: 1px solid #ebedf0;
}
.user-game .user-game-bar .row-3 .item:not(:first-child) {
  margin: 8px 5px;
}

.active {
  color: #323233;
  font-size: 18px;
  font-weight: 600;
}
</style>
